/**
 * 在jsx变化后，更新vDom的属性
 */
export default function updateNodeElement(newElement, vDom, oldVDom = {}) {
  // 元素的属性对象为vDom.props
  const newProps = vDom.props || {}
  const oldProps = oldVDom.props || {}

  // 以新的vDom为基准，进行属性添加和修改
  Object.keys(newProps).forEach(propName => {
    // 当新旧属性不相同时，开始比对
    const newValue = newProps[propName]
    const oldValue = oldProps[propName]
    if (newProps[propName] !== oldProps[propName]) {
      // 属性如果是value或checked，应该直接添加在元素对象上
      if (propName === 'value' || propName === 'checked') {
        newElement[propName] = newValue
      }
      // 属性如果是事件
      else if (propName.slice(0, 2) === 'on') {
        const eventName = propName.slice(2).toLowerCase()
        newElement.addEventListener(eventName, newValue)
        // 如果有旧的事件，将其移除
        if (oldValue)
          newElement.removeEventListener(eventName, oldValue)
      }
      // 属性如果是className
      else if (propName !== 'children') {
        if (propName === 'className')
          newElement.setAttribute('class', newValue)
        else
          newElement.setAttribute(propName, newValue)
      }

    }
  })

  // 以旧的vDom为基准，进行属性删除
  Object.keys(oldProps).forEach(propName => {
    if (!newProps[propName]) {
      const oldValue = oldProps[propName]
      // 属性如果是事件
      if (propName.slice(0, 2) === 'on') {
        const eventName = propName.slice(2).toLowerCase()
        newElement.removeEventListener(eventName, oldValue)
      }
      // 属性如果是className
      else if (propName !== 'children') {
        newElement.removeAttribute(propName)
      }
    }
  })
}